WebSockets দিয়ে Real-time Communication

WebSocket হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দ্বিমুখী (bidirectional) এবং রিয়েল-টাইম যোগাযোগ প্রতিষ্ঠা করতে সাহায্য করে। এটি সাধারণ HTTP প্রোটোকলের তুলনায় আরও কার্যকরী, কারণ WebSocket সংযোগ স্থাপন করার পর সার্ভার এবং ক্লায়েন্ট পরস্পরের মধ্যে সরাসরি বার্তা পাঠাতে এবং গ্রহণ করতে পারে। এটি রিয়েল-টাইম অ্যাপ্লিকেশন তৈরির জন্য আদর্শ, যেমন চ্যাট অ্যাপ, লাইভ স্ট্রিমিং, বা গেমিং অ্যাপ্লিকেশন।

React Native-এ WebSocket ব্যবহারের মাধ্যমে রিয়েল-টাইম যোগাযোগ প্রতিষ্ঠিত করা যেতে পারে। নিচে React Native অ্যাপ্লিকেশনে WebSocket সংযোগ কিভাবে তৈরি করা হয় তার উদাহরণ এবং বিশদ আলোচনা দেওয়া হয়েছে।

React Native-এ WebSocket এর সাথে কাজ করার উদাহরণ

React Native অ্যাপে WebSocket ইন্টিগ্রেট করতে, WebSocket API ব্যবহার করা হয়। নিচে একটি মৌলিক উদাহরণ দেওয়া হলো যেখানে WebSocket ব্যবহার করে রিয়েল-টাইম বার্তা পাঠানো এবং গ্রহণ করা হচ্ছে।

১. WebSocket সংযোগ তৈরি করা:

প্রথমে আপনাকে WebSocket সার্ভারের সাথে সংযোগ স্থাপন করতে হবে। এটি করার জন্য WebSocket কনস্ট্রাক্টর ব্যবহার করা হয়।

উদাহরণ:

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

const MyComponent = () => {
  const [message, setMessage] = useState('');
  const [receivedMessage, setReceivedMessage] = useState('');
  
  // WebSocket connection
  useEffect(() => {
    const socket = new WebSocket('ws://your-websocket-server-url');

    // Connection opened
    socket.onopen = () => {
      console.log('Connected to WebSocket server');
    };

    // Receiving messages
    socket.onmessage = (event) => {
      setReceivedMessage(event.data);
    };

    // Error handling
    socket.onerror = (error) => {
      console.log('WebSocket Error: ', error);
    };

    // Connection closed
    socket.onclose = () => {
      console.log('WebSocket connection closed');
    };

    // Cleanup on unmount
    return () => {
      socket.close();
    };
  }, []);

  // Sending message
  const sendMessage = () => {
    const socket = new WebSocket('ws://your-websocket-server-url');
    socket.onopen = () => {
      socket.send(message);
      console.log('Message sent:', message);
    };
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>WebSocket Communication Example</Text>

      {/* Input for message */}
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        placeholder="Type your message"
        value={message}
        onChangeText={setMessage}
      />

      {/* Send Button */}
      <Button title="Send Message" onPress={sendMessage} />

      {/* Display received message */}
      <Text>Received Message: {receivedMessage}</Text>
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

1. WebSocket সংযোগ স্থাপন:
   • const socket = new WebSocket('ws://your-websocket-server-url');: এখানে আমরা একটি WebSocket কনস্ট্রাক্টর ব্যবহার করছি, যেখানে ws://your-websocket-server-url আপনার WebSocket সার্ভারের URL হবে।
2. সার্ভার থেকে বার্তা গ্রহণ:
   • socket.onmessage = (event) => { setReceivedMessage(event.data); };: যখন সার্ভার থেকে একটি বার্তা আসবে, তখন সেটি onmessage ইভেন্টের মাধ্যমে পাওয়া যাবে এবং সেই বার্তাটি আমরা receivedMessage স্টেটে সেট করবো।
3. বার্তা পাঠানো:
   • socket.send(message);: ব্যবহারকারী যখন "Send Message" বাটনে ক্লিক করবেন, তখন sendMessage ফাংশনটি চালু হবে, যা বর্তমান ইনপুট বার্তা (message) সার্ভারে পাঠাবে।
4. WebSocket সংযোগের অন্যান্য ইভেন্টস:
   • onopen: সার্ভারের সাথে সফলভাবে সংযোগ স্থাপিত হলে এটি চালু হয়।
   • onerror: সংযোগে কোনো ত্রুটি ঘটলে এটি কল হয়।
   • onclose: সংযোগ বন্ধ হলে এটি কল হয়।
5. এফেক্ট ক্লিনআপ:
   • return () => { socket.close(); };: এটি useEffect হুকের ক্লিনআপ ফাংশন হিসেবে ব্যবহৃত হয়, যাতে যখন কম্পোনেন্ট আনমাউন্ট হয় তখন WebSocket সংযোগ বন্ধ হয়ে যায়।

WebSocket এর অন্যান্য প্রোপার্টি এবং ফিচার

• onopen: এটি কল হয় যখন WebSocket সার্ভারের সাথে সংযোগ স্থাপন করা হয়। আপনি এখানে লগিং বা অন্যান্য প্রাথমিক কনফিগারেশন করতে পারেন।
• onmessage: এটি সার্ভার থেকে প্রাপ্ত বার্তা (ডাটা) গ্রহণ করতে ব্যবহৃত হয়। আপনি এই ইভেন্টের মধ্যে প্রাপ্ত বার্তাটি স্টেটে সংরক্ষণ বা UI-তে প্রদর্শন করতে পারেন।
• onerror: এটি কল হয় যখন WebSocket সংযোগে কোনো সমস্যা হয়। আপনি এই ইভেন্টের মাধ্যমে ত্রুটি সমাধান বা লগিং করতে পারেন।
• onclose: এটি কল হয় যখন WebSocket সংযোগ বন্ধ হয়ে যায়। আপনি এটি ব্যবহার করে ক্লিনআপ বা লগিং করতে পারেন।

WebSocket সার্ভারের দিকে (Server Side)

React Native অ্যাপে WebSocket সংযোগের জন্য আপনাকে একটি WebSocket সার্ভার সেটআপ করতে হবে। সাধারণত Node.js এর ws প্যাকেজ বা Socket.io প্যাকেজ দিয়ে সার্ভার সাইড WebSocket সংযোগ তৈরি করা হয়।

উদাহরণ:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');
  
  // Sending a message to the client
  ws.send('Hello from server');
  
  // Receiving a message from client
  ws.on('message', (message) => {
    console.log('Received message:', message);
  });
  
  // When connection is closed
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

সারাংশ

React Native-এ WebSocket ব্যবহার করে আপনি রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে পারেন যেখানে ক্লায়েন্ট এবং সার্ভারের মধ্যে সরাসরি যোগাযোগ সম্ভব। onopen, onmessage, onerror, এবং onclose ইভেন্টগুলির মাধ্যমে WebSocket এর সাথে ইন্টারঅ্যাক্ট করা যায়, যা চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্রিমিং বা অন্যান্য রিয়েল-টাইম সিস্টেমে ব্যবহৃত হতে পারে।